<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="员工编号、电话号码或者姓名:">
        <el-input placeholder="请输入查询信息" v-model="keyword"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()" v-model="selbtn" v-if="selshow">查询</el-button>
        <!-- <el-button type="danger" @click="delAll()" v-model="delbtn" v-if="delshow">批量删除</el-button> -->
        <el-button type="success" @click="addStaff()" v-model="addbtn" v-if="addshow">增加</el-button>

      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 1150px; margin: 0px auto"
      @selection-change="handleSelectionChange"
      >
      <!-- 多选框列 
     prop:指定该列要显示的数据属性
     -->
      <!-- <el-table-column type="selection" width="55" prop="staff_id" align="center">
      </el-table-column> -->

      <el-table-column prop="staff_code" label="员工编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="staff_name" label="员工姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="staff_telephone" label="员工电话" width="120" align="center">
      </el-table-column>
      <el-table-column prop="staff_sex" label="员工性别" width="120" align="center">
      </el-table-column>
      <el-table-column prop="staff_birthday" label="员工生日" width="120" align="center">
      </el-table-column>
      <el-table-column prop="dept.dept_name" label="员工部门" width="120" align="center">
      </el-table-column>
      <el-table-column prop="position.position_name" label="员工职位" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updStaff(scope.row)" v-model="updbtn" v-if="updshow"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="deleteStaff(scope.row)" v-model="delbtn" v-if="delshow"
          >删除</el-button
          >
          <el-button size="mini" type="success" @click="giveRole(scope.row)" v-model="rolebtn" v-if="roleshow"
            >分配角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 
size-change：每页显示的条目数发生变化的时候会调用的函数

current-change:当前页发生变化的时候会调用的函数
     -->
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 增加模态框 -->
    <el-dialog title="员工增加" :visible.sync="addDialogFormVisible" width="600px">
      <el-form>
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_code"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_name"></el-input>
        </el-form-item>
        <el-form-item label="员工电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_telephone"></el-input>
        </el-form-item>
        <!-- <el-form-item label="员工性别" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_sex"></el-input>
        </el-form-item> -->
        <el-form-item label="员工性别" :label-width="formLabelWidth">
        <el-radio-group v-model="addForm.staff_sex" style="margin-left: -350px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="员工生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addForm.staff_birthday"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select
            v-model="addForm.dept_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in deptList"
              :key="item.dept_id"
              :label="item.dept_name"
              :value="item.dept_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth">
          <el-select
            v-model="addForm.position_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in positionList"
              :key="item.position_id"
              :label="item.position_name"
              :value="item.position_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->

    <!-- 分配角色模态框开始 -->
    <el-dialog title="分配角色" :visible.sync="roleDialogFormVisible" width="600px">
      <!--v-model:双向的数据绑定，存放的是选中项的value值 -->
      <el-checkbox-group v-model="checkedRoles">
        <!--label:value  -->
        <el-checkbox v-for="role in roleList" :label="role.role_id" :key="role.role_id">{{
          role.role_name
        }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRoles()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 分配角色模态框结束 -->

    <!-- 修改模态框 -->
    <el-dialog title="员工修改" :visible.sync="updDialogFormVisible" width="600px">
      <el-form>
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_code"></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_name"></el-input>
        </el-form-item>
        <el-form-item label="员工电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_telephone"></el-input>
        </el-form-item>
        <!-- <el-form-item label="员工性别" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.staff_sex"></el-input>
        </el-form-item> -->
        <el-form-item label="员工性别" :label-width="formLabelWidth">
        <el-radio-group v-model="addForm.staff_sex" style="margin-left: -350px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
        <el-form-item label="员工生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="addForm.staff_birthday"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <!-- <el-input type="text" v-model="addForm.staff_birthday"></el-input> -->
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select
            v-model="addForm.dept_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in deptList"
              :key="item.dept_id"
              :label="item.dept_name"
              :value="item.dept_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth">
          <el-select
            v-model="addForm.position_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in positionList"
              :key="item.position_id"
              :label="item.position_name"
              :value="item.position_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUpd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },    
      selbtn:'11',
      addbtn:'9',
      updbtn:'10',
      delbtn:'12',
      rolebtn:'6',
      selshow:false,
      addshow:false,
      delshow:false,
      updshow:false,
      roleshow:false,
      pageInfo: {},
      currentPage: 1,
      pageSize: 3,
      keyword: "",
      ids: [],
      addDialogFormVisible: false,
      addForm: {
        staff_code: "",
        staff_name: "",
        staff_telephone: "",
        staff_sex: "",
        staff_birthday: "",
        position_id: "",
        dept_id: "",
      },
      formLabelWidth: "80px",
      deptList: [],
      positionList: [],
      roleDialogFormVisible: false,
      roleList: [],
      checkedRoles: [],
      id: "",
      updDialogFormVisible: false,
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/staff", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            keyword: this.keyword,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
          setTimeout(() => {
            //设置默认选中项
            this.login();
          }, 0);
        })
        .catch((error) => {});
    },
    //val:array,代表的是选中所有行的数据
    handleSelectionChange(val) {
      var ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.staff_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;

      console.log(ids);
      //this.multipleSelection = val;
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    search() {
      this.loadData();
    },
    delAll() {
      this.$axios
        .post("/staff/delAll", this.ids)
        .then((res) => {
          alert(res.data.message);
          this.loadData();
        })
        .catch((error) => {});
    },
    deleteStaff(item) {
      var id = item.staff_id;
      this.$axios.delete("/staff/" + id).then((res) => {
        alert(res.data.message);
        this.loadData();
      });
      //项服务器发送请求删除就ok
    },
    addStaff() {
      this.addForm.staff_code = "";
      this.addForm.staff_name = "";
      this.addForm.staff_telephone = "";
      this.addForm.staff_sex = "";
      this.addForm.staff_birthday = "";
      this.addForm.position_id = "";
      this.addForm.dept_id = "";
      this.addDialogFormVisible = true;
      this.$axios
        .get("/position/dept")
        .then((res) => {
          this.deptList = res.data.data.deptList;
          this.positionList = res.data.data.positionList;
        })
        .catch((error) => {});
    },
    saveAdd() {
      this.$axios
        .post("/staff/add", this.addForm)
        .then((res) => {
          alert(res.data.message);
          this.addForm.staff_code = "";
          this.addForm.staff_name = "";
          this.addForm.staff_telephone = "";
          this.addForm.staff_sex = "";
          this.addForm.staff_birthday = "";
          this.addForm.position_id = "";
          this.addForm.dept_id = "";
          this.addDialogFormVisible = false;
          this.loadData();
        })
        .catch((error) => {});
    },
    giveRole(item) {
      this.roleDialogFormVisible = true;
      this.id = item.staff_id;
      this.$axios
        .get("/role/distribute/" + this.id)
        .then((res) => {
          this.roleList = res.data.data.rolesList;
          this.checkedRoles = res.data.data.checkedRoles;
        })
        .catch((error) => {});
    },
    saveRoles() {
      this.$axios
        .post("/role", {
          staff_id: this.id,
          checkedRoles: this.checkedRoles,
        })
        .then((res) => {
          this.roleDialogFormVisible = false;
          alert(res.data.message);
        })
        .catch((error) => {});
    },
    updStaff(item) {
      this.updDialogFormVisible = true;
      this.id = item.staff_id;
      this.$axios
        .get("/staff/" + this.id)
        .then((res) => {
          this.addForm.staff_code = res.data.data.staff.staff_code;
          this.addForm.staff_name = res.data.data.staff.staff_name;
          this.addForm.staff_telephone = res.data.data.staff.staff_telephone;
          this.addForm.staff_sex = res.data.data.staff.staff_sex;
          this.addForm.staff_birthday = res.data.data.staff.staff_birthday;
          this.addForm.position_id = res.data.data.staff.position_id;
          this.addForm.dept_id = res.data.data.staff.dept_id;
          this.positionList = res.data.data.positionList;
          this.deptList = res.data.data.deptList;
        })
        .catch((error) => {});
    },
    saveUpd() {
      this.$axios
        .put("/staff", {
          staff_id: this.id,
          staff_code: this.addForm.staff_code,
          staff_name: this.addForm.staff_name,
          staff_telephone: this.addForm.staff_telephone,
          staff_sex: this.addForm.staff_sex,
          staff_birthday: this.addForm.staff_birthday,
          position_id: this.addForm.position_id,
          dept_id: this.addForm.dept_id,
        })
        .then((res) => {
          alert(res.data.message);
          this.updDialogFormVisible = false;
          this.addForm.staff_code = "";
          this.addForm.staff_name = "";
          this.addForm.staff_telephone = "";
          this.addForm.staff_sex = "";
          this.addForm.staff_birthday = "";
          this.addForm.position_id = "";
          this.addForm.dept_id = "";
          this.loadData();
        });
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.selbtn){
          this.selshow = true;
        }
        if(item == this.addbtn){
          this.addshow = true;
        }
        if(item == this.updbtn){
          this.updshow = true;
        }
        if(item == this.delbtn){
          this.delshow = true;
        }
        if(item == this.rolebtn){
          this.roleshow = true;
        }
      })
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>